<template>
  <div class='m-firmEmployees'>
    <div style='padding-bottom: 20px;'>
      <el-button type='primary' @click='openRoleDialog'>添加员工</el-button>
    </div>
    <a-table :data='data' :cols='tableKeys'>
      <el-table-column align="center" label="操作" width='380'  slot='ahead'>
        <template slot-scope="scope">
          <div class='m-firmEmployees-table-handle'>
            <el-button size='mini' @click='updateStaff(scope.row.staff_id)'>修改</el-button>
            <el-button size='mini' @click='setDept(scope.row)'>改部门</el-button>
            <el-button size='mini' @click='setRole(scope.row)'>改角色</el-button>
            <el-button size='mini' @click='setStaff(scope.row)'>下级</el-button>
            <el-button size='mini' @click='setBoss(scope.row)'>改上级</el-button>
            <el-button size='mini' @click='deleteEmployees(scope.row.staff_id)'>删除</el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="所属下级" min-width="100">
        <template slot-scope="scope">
          {{ getString(scope.row.subordinates)}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="所属上级" property='superior_name' width='100'></el-table-column>
    </a-table>
    <div class='u-pagination'>
      <!-- 分页 -->
      <pagination ref='page' @change='getData' :action='fetchData' :pageSize='20'></pagination>
    </div>

    <role-dialog
      ref='roleDialog'
      :id='selectId'
      @close='emitCloseDialog'
      :openType='openType'
    ></role-dialog>

    <select-list
      ref='selectListDept'
      :id='selectId'
      title='选择部门'
      listType='dept'
      typeKey='aDeptId'
      listPath='firmGetDepts'
      updatePath='firmAddDepts'
      updateSuccessTitle='选择部门'
      @update='updateList'
    ></select-list>

    <select-list
      ref='selectListBoss'
      :id='selectId'
      title='选择上级领导'
      typeKey='aUnderStaffId'
      listPath='firmGetStaffs'
      updatePath='firmAddUnderStaff'
      updateSuccessTitle='选择上级领导'
      @update='updateList'
    ></select-list>

    <role-configure
      :id='this.selectId'
      typeName='角色'
      title='修改角色'
      idKey='aRoleId'
      configType='role'
      getSelectedDataPath='firmGetStaffRoles'
      addPath='firmAddRoleStaff'
      deletePath='firmDeleteRoleStaff'
      ref='roleConfigure'
      @close='updateList'
    />

    <role-configure
      :id='this.selectId'
      typeName='下级'
      title='添加员工'
      idKey='aUnderStaffId'
      configType='staff'
      getSelectedDataPath='firmGetStaffSubordinates'
      addPath='firmAddUnderStaff'
      deletePath='firmDeleteUnderStaff'
      ref='staffConfigure'
      @close='updateList'
    />
  </div>
</template>

<script>
import roleDialog from './addRoleDialog'
import selectList from './selectList'
import roleConfigure from './roleConfigure'

export default {
  name: 'firmEmployees',

  components: {
    roleDialog,
    selectList,
    roleConfigure
  },

  data() {
    return {
      tableKeys: [
        { prop: 'login_name', label: '登录账号', minWidth: '100' },
        { prop: 'name', label: '名称', minWidth: '100' },
        { prop: 'dept_name', label: '所属部门', minWidth: '100' },
        { prop: 'roles', label: '员工角色', minWidth: '100' }
      ],
      data: [],
      ifRequesting: false,
      selectId: '',
      openType: 'add',
      isNextSet: false,
      nextType: ''
    }
  },

  async mounted() {
    this.$refs.page.changePage()
  },

  methods: {
    updateList() {
      console.log(this.isNextSet)
      if (this.isNextSet) {
        console.log(this.nextType)
        switch (this.nextType) {
        case 'role':
          this.setRole({ staff_id: this.selectId })
          this.nextType = 'staff'
          break
        case 'staff':
          this.setStaff({ staff_id: this.selectId })
          this.nextType = 'boss'
          break
        case 'boss':
          this.setBoss({ staff_id: this.selectId })
          this.nextType = ''
          break
        default:
          this.isNextSet = false
          break
        }
      }
      this.$refs.page.changePage()
    },

    async fetchData(aPageNum, aPageSize) {
      return this.$api.firmGetStaffs({
        aPageNum,
        aPageSize,
        aFirmId: this.aFirmId
      })
    },

    getData(data) {
      this.data = data
    },

    deleteEmployees(aStaffId) {
      if (this.ifRequesting) return false
      this.__messageBox({
        title: '你确认要删除该员工吗？',
        successCallback: async () => {
          this.ifRequesting = true
          console.log(aStaffId)
          const { code } = await this.$api.firmDeleteStaff({ aStaffId })
          this.ifRequesting = false
          this.$refs.page.changePage()
          return code
        }
      })
    },

    getString(array) {
      return array.map(v => v.name).join(', ')
    },

    updateEmployees(id) {
      this.selectId = id
      this.$refs.dialog.show()
    },

    openRoleDialog() {
      this.selectId = ''
      this.openType = 'add'
      this.$refs.roleDialog.__show()
    },

    updateStaff(id) {
      this.selectId = id
      this.openType = 'modify'
      this.$refs.roleDialog.__show('modify', id)
    },

    closeDialog() {
      this.$refs.page.changePage()
    },

    emitCloseDialog(change, id) {
      if (change) {
        this.$refs.page.changePage()
        if (!id) return false
        this.isNextSet = true
        this.nextType = 'role'
        // 打开设置部门的
        this.selectId = id
        this.setDept({ staff_id: id })
      }
    },

    setDept({ staff_id }) {
      this.selectId = staff_id
      this.$refs.selectListDept.show()
    },

    setBoss({ staff_id }) {
      this.selectId = staff_id
      this.$refs.selectListBoss.show()
    },
    setRole({ staff_id }) {
      this.selectId = staff_id
      this.$refs.roleConfigure.show()
    },

    setStaff({ staff_id }) {
      this.selectId = staff_id
      this.$refs.staffConfigure.show()
    }
  }
}
</script>

<style lang='less'>
.m-firmEmployees {
}
</style>